<template>
  <div>
   <button @click="startGeneration">生成文档</button> <button @click="downloadWord" :disabled="!generatedFile">下载文档</button> 
   <img :src="'data:image/png;base64,'+base64Image" alt="Generated Image">
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {getAnalysisReport} from "@/api/charge/ticket.js"
import { generateWordDocument, download } from '../../../utils/wordGenerate.js';
const base64Image=ref()

const generatedFile = ref(null);
// 模板文件的路径，一般放在 public 目录中
const templatePath = '/template.docx'; 
const data =ref( { name: '测试', date: '2024-09-23',collectionFee:[],pieImg:'' })
const startGeneration = async () => { 
try {
   generatedFile.value = await generateWordDocument(templatePath, data.value); 
   console.log('文档生成成功');
} catch (error){
   console.error('Error generating document:', error);
 }
};
//文档下载
const downloadWord = () => {
if (generatedFile.value) {
download(generatedFile.value, '收费运营分析.docx');
} else {
console.error('No file generated');
}};

const getImageList=()=>{
  getAnalysisReport({"deptId":"143","yearMonth":"2024-11"}).then(res=>{
    base64Image.value=res.data.numPie;
    data.value.collectionFee=res.data.amtTable;
    data.value.pieImg=res.data.feeLine;
  })
}


getImageList()
</script>
